@extends('Admin.base')
@section('css')
    <link rel="stylesheet" href="/Admin/layuiadmin/css/extend/formSelects-v4.css" media="all">
@endsection
@section('style')

@endsection
@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item layui-row">

                <div class="layui-inline layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <label class="layui-form-label">注册时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="datetime" class="layui-input" id="datetime-pick" placeholder=" - "
                               readonly>
                    </div>
                </div>

                <div class="layui-inline layui-col-xs2 layui-col-sm2 layui-col-md2">
                    <label class="layui-form-label">会员等级</label>
                    <div class="layui-input-block">
                        <select name="level">
                            <option value=''>全部</option>
                            @foreach (\App\Models\UserAccount::LEVEL as $id => $name)
                                <option value="{{$id}}">{{$name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="layui-inline layui-col-xs2 layui-col-sm2 layui-col-md2">
                    <label class="layui-form-label">会员身份</label>
                    <div class="layui-input-block">
                        <select name="user_type">
                            <option value=''>全部</option>
                            @foreach (\App\Models\User::USER_TYPE as $id => $name)
                                <option value="{{$id}}">{{$name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>


                <div class="layui-inline layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <label class="layui-form-label">会员信息</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="会员姓名、手机号码、员工ID" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>


                <div class="layui-inline">
                    <div class="layui-btn-group layui-input-block">
                        <button class="layui-btn layui-btn-sm layui-input-block layuiadmin-btn-admin" lay-submit
                                lay-filter="LAY-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-table" lay-filter="LAY-table"></table>

            <script type="text/html" id="tableToolbar">
                <button class="layui-btn" lay-event="show">查看详情</button>
            </script>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn" lay-event="export">导 出</button>
                </div>
            </script>


        </div>
    </div>
@endsection

@section('script')
    <script src="/js/ajax.js"></script>
    <script type="text/html" id="inviteInfo">
        <div>
            @{{# if(d.inviteInfo != ''){ }}
            @{{d.inviteInfo ? d.inviteInfo.realname : "" }}<br>@{{d.inviteInfo ? (d.inviteInfo.number ?
            d.inviteInfo.number : '') : ""}}<br>@{{d.inviteInfo ? d.inviteInfo.user_department.department_name : ""}}
            @{{# } }}
        </div>

    </script>
    <script>
        layui.use(['form', 'table', 'formSelects', 'laydate'], function () {
            var $ = layui.$
                , form = layui.form
                , table = layui.table
                , formSelects = layui.formSelects
                , laydate = layui.laydate;

            //日期时间范围
            laydate.render({
                elem: '#datetime-pick'
                , type: 'datetime'
                , range: '~'
            });


            table.render({
                elem: '#LAY-table'
                , toolbar: '#toolbarDemo'
                , url: "{{url('/admin/user/table')}}"
                , method: "post"
                , page: true //开启分页
                , limit: 10
                , cols: [[
                    {type: 'checkbox',}
                    , {field: 'id', title: '序号', width: 80, unresize: true,}
                    , {
                        field: 'avatar', title: '头像', templet: function (d) {
                            return '<img src="' + d.avatar + '" />'
                        }
                    }
                    , {
                        field: 'nickname',
                        title: '会员信息',
                        templet: '<div>@{{d.nickname ? d.nickname : "" }}<br>@{{d.phone ? d.phone : ""}}</div>'
                    }
                    , {field: 'sex_name', title: '性别'}
                    , {field: 'created_at', title: '注册时间'}
                    , {
                        field: 'calcLevel',
                        title: '会员等级',
                        templet: '<div>@{{d.calcLevel ? d.calcLevel : "" }}<br>@{{d.surplus_time ? d.surplus_time : ""}}</div>'
                    }
                    , {field: 'user_type_name', title: '会员身份'}
                    , {field: 'user_type_name', title: '所属员工信息', templet: '#inviteInfo'}
                    , {field: 'money_consh', title: '贝壳余额'}
                    , {field: 'money_eight_consh', title: '八贝币余额'}
                    , {field: 'money_recharge', title: '充值余额'}
                    , {
                        field: 'order_num',
                        title: '成交信息',
                        templet: '<div>订单: @{{d.order_num ? d.order_num : 0 }}<br>金额: @{{d.total_real_pay ? d.total_real_pay : 0}}</div>'
                    }
                    , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#tableToolbar'}
                ]]

            });

            //监听工具条
            table.on('toolbar(LAY-table)', function (obj) {
                switch (obj.event) {
                    //判断是否为导出按钮
                    case 'export':
                        var field = obj.config.where;
                        var checkStatus = table.checkStatus(obj.config.id);
                        var data = checkStatus.data;
                        var id_str = '';
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                id_str += data[i].id + ',';
                            }
                            id_str = id_str.substr(0, id_str.length - 1);
                        }

                        layer.prompt({
                            id_str: id_str,
                            formType: 0,
                            value: '',
                            title: '请输入文件名称',
                            btn: ['导出', '取消']
                        }, function (value, index, elem) {
                            if (value == '' || value == undefined) {
                                layer.msg('请输入文件名称');
                            } else {
                                field.filename = value;
                                field.ids = id_str;
                                $.ajax({
                                    url: '/admin/user/export'
                                    , type: 'POST'
                                    , dataType: 'json'
                                    , data: field
                                    , success: function (ret) {
                                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                                            layer.msg(ret.message, {icon: 1, time: 2000});
                                            return false;
                                        }
                                        layer.msg(ret.message, {icon: 2});
                                    }
                                });
                                layer.close(index);
                            }

                        });
                        break;
                }

            });


            //监听工具条
            table.on('tool(LAY-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'show') {
                    location.href = '/admin/user/show/' + data.id;
                }
            });


            //监听搜索
            form.on('submit(LAY-search)', function (data) {
                var field = data.field;
                //执行重载
                table.reload('LAY-table', {
                    where: field, page: {curr: 1}
                });
            });
        });
    </script>

@endsection